<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${ctx}/scripts/combogrid/resources/plugin/jquery.ui.combogrid-1.6.3.js"></script>
<script type="text/javascript" src="${ctx}/scripts/combogrid/resources/plugin/jquery.i18n.properties-1.0.9.js"></script>
<%-- <link rel="stylesheet" type="text/css" media="screen" href="${ctx}/scripts/combogrid/resources/css/smoothness/jquery-ui-1.10.1.custom.css"/> --%>
<link rel="stylesheet" type="text/css" media="screen" href="${ctx}/scripts/combogrid/resources/css/smoothness/jquery.ui.combogrid.css"/>



<script type="text/javascript">

	jQuery(document).ready(function() {

		//"keyup" event handler to reset input fields
		$("#user").live('keyup', function() {
			if ($("#user").val().length == 0) {
				$('#user-id').val("");
			}
		});

		$("#user").combogrid({
			url : '${ctx}/utils/comboUserGrid',
			/* debug : true,
			searchButton : false,
			resetButton : false,
			searchIcon:true,
			okIcon:true,
			draggable:true,
			rememberDrag: true,
			showOn:false, */
			replaceNull: true,
			colModel : [ {
				'columnName' : 'id',
				'width' : '10',
				'label' : 'id'
			}, {
				'columnName' : 'username',
				'width' : '60',
				'label' : 'username'
			}, {
				'columnName' : 'realname',
				'width' : '30',
				'label' : 'realname'
			} ],
			select : function(event, ui) {
				$("#user-id").val(ui.item.id);
				$("#user").val(ui.item.username);
				return false;
			}
		});
	});
</script>
</head>
<body>
	<div>
		<div style="float:left"><input size="30" id="user-id" readonly="readonly"/></div><br/>&nbsp;<br/>
		<div style="float:left"><input size="30" id="user"/></div><br/>&nbsp;<br/>
		<!-- <div id="switcher" style="float:right"></div> -->
	</div>
</body>
</html>